<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人作品集</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <nav>
            <div class="logo" data-i18n="nav.home">我的作品集</div>
            <div class="nav-right">
                <ul class="nav-links">
                    <li><a href="#home" data-i18n="nav.home">首页</a></li>
                    <li><a href="#about" data-i18n="nav.about">关于我</a></li>
                    <li><a href="#portfolio" data-i18n="nav.portfolio">作品展示</a></li>
                    <li><a href="#contact" data-i18n="nav.contact">联系方式</a></li>
                </ul>
                <div class="language-selector">
                    <button data-lang="zh-CN" class="active">中文</button>
                    <button data-lang="en">English</button>
                </div>
                <button id="themeToggle" class="theme-toggle">
                    <span class="theme-icon">🌙</span>
                </button>
            </div>
        </nav>
    </header>

    <main>
        <section id="home" class="hero">
            <div class="particles-container" id="particles"></div>
            <div class="hero-content">
                <h1 data-i18n="hero.title">欢迎来到我的作品集</h1>
                <p data-i18n="hero.subtitle">我是一名充满激情的开发者，专注于创建优秀的数字体验</p>
                <button class="cta-button" data-i18n="hero.cta">了解更多</button>
            </div>
        </section>

        <section id="about" class="about">
            <div class="container">
                <h2 data-i18n="about.title">关于我</h2>
                <div class="about-content">
                    <div class="about-avatar">
                        <img src="images/news2.jpg" alt="个人头像">
                    </div>
                    <div class="about-text">
                        <h3 data-i18n="about.position">Python Developer</h3>
                        <p data-i18n="about.description1">我是一名经验丰富的Python开发者，擅长消息中间件、实时数据处理和高可用架构设计。</p>
                        <p data-i18n="about.description2">在技术领域，我热衷于探索新技术和解决方案，不断挑战自我。同时，我也是一名Rust爱好者，喜欢研究系统级编程。</p>
                        <p data-i18n="about.description3">在工作之余，我喜欢观看动画，特别是幸运星、孤独摇滚和摇曳露营，这些作品给了我很多灵感和放松的时刻。</p>
                    </div>
                    <div class="skills">
                        <h3 data-i18n="about.skills">技能专长</h3>
                        <div class="skill-list">
                            <div class="skill-item skill-pro">Python</div>
                            <div class="skill-item skill-pro">MongoDB</div>
                            <div class="skill-item skill-intermediate">Next.js</div>
                            <div class="skill-item skill-intermediate">ElasticSearch</div>
                            <div class="skill-item skill-beginner">Rust</div>
                        </div>
                    </div>
                </div>
                
                <div class="experience-achievements-container">
                    <div class="timeline-section">
                        <h3 data-i18n="about.experience">专业经历</h3>
                        <div class="timeline">
                            <div class="timeline-item">
                                <div class="timeline-date">2010-2014</div>
                                <div class="timeline-content">
                                    <h4 data-i18n="experience.2010_2014.institution">清华大学</h4>
                                    <p data-i18n="experience.2010_2014.degree">本科，计算机科学与技术</p>
                                </div>
                            </div>
                            <div class="timeline-item">
                                <div class="timeline-date">2014-2016</div>
                                <div class="timeline-content">
                                    <h4 data-i18n="experience.2014_2016.institution">斯坦福大学</h4>
                                    <p data-i18n="experience.2014_2016.degree">硕士，计算机科学</p>
                                </div>
                            </div>
                            <div class="timeline-item">
                                <div class="timeline-date">2017-2020</div>
                                <div class="timeline-content">
                                    <h4 data-i18n="experience.2017_2020.company">Google</h4>
                                    <p data-i18n="experience.2017_2020.position">软件工程师</p>
                                </div>
                            </div>
                            <div class="timeline-item">
                                <div class="timeline-date">2021-2023</div>
                                <div class="timeline-content">
                                    <h4 data-i18n="experience.2021_2023.company">OpenAI</h4>
                                    <p data-i18n="experience.2021_2023.position">软件工程师</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="achievements">
                        <h3 data-i18n="about.achievements">个人成就</h3>
                        <div class="achievements-list">
                            <div class="achievement-item">
                                <div class="achievement-icon">🏆</div>
                                <div class="achievement-content">
                                    <h4 data-i18n="achievement.1.title">清华大学优秀毕业生</h4>
                                </div>
                            </div>
                            <div class="achievement-item">
                                <div class="achievement-icon">⭐</div>
                                <div class="achievement-content">
                                    <h4 data-i18n="achievement.2.title">微软MVP</h4>
                                </div>
                            </div>
                            <div class="achievement-item">
                                <div class="achievement-icon">🎓</div>
                                <div class="achievement-content">
                                    <h4 data-i18n="achievement.3.title">华为开发者认证</h4>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section id="portfolio" class="portfolio">
            <div class="container">
                <h2 data-i18n="portfolio.title">作品展示</h2>
                <div class="portfolio-grid">
                    <div class="portfolio-item">
                        <div class="portfolio-image">
                            <img src="images/news4.jpg" alt="项目1">
                        </div>
                        <div class="portfolio-info">
                            <h3 data-i18n="portfolio.item1.title">项目名称 1</h3>
                            <p data-i18n="portfolio.item1.desc">项目描述和主要功能特点</p>
                            <a href="#" class="project-link" data-i18n="portfolio.item1.link">查看详情</a>
                        </div>
                    </div>
                    <div class="portfolio-item">
                        <div class="portfolio-image">
                            <img src="images/news2.jpg" alt="项目2">
                        </div>
                        <div class="portfolio-info">
                            <h3 data-i18n="portfolio.item2.title">项目名称 2</h3>
                            <p data-i18n="portfolio.item2.desc">项目描述和主要功能特点</p>
                            <a href="#" class="project-link" data-i18n="portfolio.item2.link">查看详情</a>
                        </div>
                    </div>
                    <div class="portfolio-item">
                        <div class="portfolio-image">
                            <img src="images/news5.jpg" alt="项目3">
                        </div>
                        <div class="portfolio-info">
                            <h3 data-i18n="portfolio.item3.title">项目名称 3</h3>
                            <p data-i18n="portfolio.item3.desc">项目描述和主要功能特点</p>
                            <a href="#" class="project-link" data-i18n="portfolio.item3.link">查看详情</a>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section id="contact" class="contact">
            <div class="container">
                <h2 data-i18n="contact.title">联系方式</h2>
                <div class="contact-content">
                    <div class="contact-info">
                        <h3 data-i18n="contact.info">联系信息</h3>
                        <p><strong>邮箱：</strong> <a href="mailto:50274968@qq.com" style="color: #3498db; text-decoration: none;">50274968@qq.com</a></p>
                        <p><strong>个人网页：</strong> <a href="https://github.com/Vinenru" target="_blank" style="color: #3498db; text-decoration: none;">https://github.com/Vinenru</a></p>
                    </div>
                    <div class="contact-form">
                        <h3 data-i18n="contact.form">发送消息</h3>
                        <form id="contactForm">
                            <input type="text" id="name" name="name" data-i18n-placeholder="contact.name" placeholder="您的姓名" required>
                            <input type="email" id="email" name="email" data-i18n-placeholder="contact.email" placeholder="您的邮箱" required>
                            <textarea id="message" name="message" data-i18n-placeholder="contact.message" placeholder="您的留言" rows="5" required></textarea>
                            <button type="submit" data-i18n="contact.submit">发送消息</button>
                        </form>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <footer>
        <div class="container">
            <p>&copy; 2024 <span data-i18n="footer.copyright">个人作品集. 保留所有权利.</span></p>
            <div class="social-links">
                    <a href="https://github.com/Vinenru" target="_blank">GitHub</a>
                    <a href="mailto:50274968@qq.com">邮箱</a>
                </div>
        </div>
    </footer>

    <script type="module" src="main.js"></script>
</body>
</html>
